<template>
    <div class="jd-home-nav-list">
        <van-swipe class="my-swipe" :loop='false' :duration="300" indicator-color="red">

            <van-swipe-item>
                <!-- 宫格展示 -->
                <van-grid :border="false" :column-num="5">
                    <van-grid-item v-for="item in navs" :key="item.id" :icon="item.img" :text="item.title" />
                </van-grid>

            </van-swipe-item>
            <van-swipe-item>
                <van-grid :border="false" :column-num="5">
                    <van-grid-item v-for="item in navs2" :key="item.id" :icon="item.img" :text="item.title" />
                </van-grid>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script setup lang="ts">
const navs = [
    {
        id: 1,
        title: '京东超市',
        img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'
    },
    {
        id: 2,
        title: '数码电器',
        img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png'
    },
    {
        id: 3,
        title: '京东新百货',
        img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png'
    },
    {
        id: 4,
        title: '京东生鲜',
        img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png'
    },
    {
        id: 5,
        title: '京东到家',
        img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png'
    },
    {
        id: 6,
        title: '充值缴费',
        img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png'
    },
    {
        id: 7,
        title: '附近好店',
        img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png'
    },
    {
        id: 8,
        title: '领券',
        img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png'
    },
    {
        id: 9,
        title: 'PLUS会员',
        img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png'
    },
    {
        id: 10,
        title: '京东国际',
        img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png'
    },
]
const navs2 = [
    {
        id: 1,
        title: '京东拍卖',
        img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/186882/8/12149/5894/60ec1250E9335241a/b22054613aa8ae75.png'
    },
    {
        id: 2,
        title: '玩3c',
        img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/145692/9/1817/4493/5efbf652E61c4f3ec/722840c121d67fc6.png'
    },
    {
        id: 3,
        title: '沃尔玛',
        img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/185282/10/13877/6658/60ec1404E0fc4061a/a7c213f76e37a8d6.png'
    },
    {
        id: 4,
        title: '美妆馆',
        img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/182378/35/13924/7463/60ec14c6E1f434a60/37fba58239f3547e.png'
    },
    {
        id: 5,
        title: '京东旅行',
        img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/191377/35/12864/5624/60ec146cE304517a9/20acb632f59fbbbd.png'
    },
    {
        id: 6,
        title: '拍拍二手',
        img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/36551/10/16098/5792/60ec1589E755822d7/f958b896e706008a.png'
    },
    {
        id: 7,
        title: '全部',
        img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/192665/22/12752/7912/60ec15cbE261a32bf/3ace51badf80e71b.png'
    },
]
</script>

<style scoped lang="scss">
.jd-home-nav-list {
    height: 210px;
    box-sizing: border-box;
    padding: 15px;

    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        /* background-color: #39a9ed; */
    }
}
</style>